<template>
  <div id="sms" v-show="sms">
    <h1 style="text-align: center">短信登入</h1>
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="手机号" prop="phoneNumber">
        <el-input
          type="text"
          v-model="ruleForm.phoneNumber"
          autocomplete="off"
          class="messages"
        ></el-input>
        <!-- 发送验证码 -->
        <span @click="sendSms" v-text="msg"></span>
      </el-form-item>

      <el-form-item label="验证码" prop="smsCode">
        <el-input
          type="text"
          v-model="ruleForm.smsCode"
          autocomplete="off"
        ></el-input>
      </el-form-item>


      <el-form-item>
        <!-- <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button> -->
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>

    <div class="change" @click="names">
         <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shouji-iphone12-zhengmian"></use>
        </svg>
        
        <!-- <p>账号密码登录</p> -->
        <a href="javascript:;">账号密码登录</a>
    </div> 
  </div>
</template>


<script>
//引入接口api
import * as api from "@/api/users"
import storage from "../../utils/storage"
// 校验手机号
var validatePhoneNumber = (rule, value, callback) => {
    var uPattern = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
    if (uPattern.test(value)) {
        callback();
    } else {
        callback("手机号必须以1开头");
    }
};
var validateSmsCode = (rule, value, callback) => {
    if (value) {
        callback();
    } else {
        callback("验证码不能为空");
    }
};
export default {
    props:['sms'],
    data() {
        return {
          msg:"点击发送验证码",
          flag: true,//一个开关
          
          ruleForm: {
              phoneNumber: "",
              smsCode: "",
          },
          rules: {
              phoneNumber: [{ validator: validatePhoneNumber, trigger: "blur" }],
              smsCode: [{ validator: validateSmsCode, trigger: "blur" }],
          },
    };
  },
  methods: {
    //点击发送手机验证码
    async sendSms(){
      if(this.flag){
        this.flag = false;
        //调用接口，获取手机验证码
        let res = await api.getSmsCode(this.ruleForm.phoneNumber)
        // console.log(res);
        if(res.data.state){
          //短信发送成功
          this.$message({
            type:"success",
            message:'短信发送成功'
          })
        }else{
          this.$message.error(res.data.msg)
        }

        let delay = 5;
        this.msg = `${delay}秒后重新发送`
        this.interval = setInterval(() => {
          delay--
          if(delay < 1){
            this.msg = "点击发送验证码"
            clearInterval(this.interval)
            this.flag = true
          }else{
            this.msg = `${delay}秒后重新发送`
          }
          
        },1000)

        
      }
    },

    // submitForm(formName) {
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       alert("submit!");
    //     } else {
    //       console.log("error submit!!");
    //       return false;
    //     }
    //   });
    // },
    async submitForm(){
      let res = await api.smsLogin(this.ruleForm.smsCode)
      console.log(res);
      this.storageUserInfo(res.data)
      //跳转到主页 
      // this.$router.push("/home")
      this.$router.push("/welcome")
    },
    //封装一个方法 用于存储用户的信息和token
    storageUserInfo({ userInfo, token, permission }){
    storage.set('userInfo',userInfo )
    storage.set('sasa-token', token)
    storage.set('permission', permission)
    // let r = storage.get('userInfo')
    // console.log(r);
    },


    names(){
        this.$emit('names')
    }
  },
};
</script>


<style scoped lang="less">
h1 {
  margin: 0 0 60px 0;
  text-align: center;
  color: #000;
}
.el-input {
  position: relative;
  font-size: 14px;
  width: 250px;
}
/deep/ .messages {
  width: 140px;
}
/deep/ .messages .el-input__inner{
    border: 0;
    border-radius: 5px 0 0 5px;
}

.el-input {
  /deep/ .el-input__inner {
    width: 100%;
  }
}
/deep/ .el-form-item__label {
  color: #333;
}
.el-form-item__content{
    span{
        display: inline-block;
        width: 110px;
        font-size: 13px;
        // font-weight: 500;
        color: rgb(136,136,136);
        text-align: center;
        text-decoration: underline;
        background-color: white;
        cursor: pointer;
        border: 0;
        border-radius: 0 5px 5px 0;
        position: absolute;
        top: 2px;
        user-select: none;
    }
}


.el-button {
  background: linear-gradient(90deg, #cbd0e1, #bfc1d8);
  width: 250px;
  color: #333;
}
/deep/.el-button--primary {
  border-color: #c8c8dc;
}
.change{
    margin-left: 100px;
    width: 250px;
    text-align: center;
}
a{
    text-align:center;
    color: #666;   
}
.icon{
    font-size:20px!important;
}
</style>